<template>
  <div class='com-head pr bc-gray'>
    <div class="pa w1200">
      <span v-for="(item, index) in formaltData" :key="index" :class="item.class" @click="doClick(item)"><i v-if="item.logo"><img :src="item.logo" class="pa" alt=""></i> {{item.label}}</span>
    </div>
  </div>
</template>
<script>
export default {
  props:['data'],
  components: {},
  name: "",
  data() {
    return {
      headData:[
        {logo:require('@/assets/imgs/login/home.png'),class:"pr hover",label:"风水网首页",router:"/homepage"},
        {label:"欢迎登录风水网"},
        {label:"请登录",class:"hover",router:"/login"},
        {label:"免费注册",class:"hover",router:"/login/register"},
        {label:"客户服务",class:"hover fr"},
        {label:"我的消息",class:"hover fr",router:'/center/mycenter/news/newscenter'},
        {label:"卖家中心",class:"hover fr",router:'/center/seller/shopManage/myshop'},
        {label:"买家中心",class:"hover fr",router:'/center/buyer'},
      ]
    };
  },
  computed:{
    formaltData(){
      return this.data||this.headData
    }
  },
  methods: {
    /**
     * @name 执行click
     */
    doClick(item){
      if(item.router)this.$router.push(item.router)
    },
  },
  created() {
    
  }
};
</script>
<style lang="scss" scoped>
.com-head{
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: $c666;
  font-size: 12px;
  box-sizing: border-box;

  >div{
    left: 50%;
    transform: translate(-50%);
  }

  span{
    margin-right: 20px;
  }
  span.fr{
    margin-right: 0;
    margin-left: 20px;
  }
  span.pr{
    padding-left: 20px;
  }
  img{
    width: 13px;
    top: 50%;
    transform: translateY(-50%)
  }
}
</style>